'use client'

import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { 
  Plus, 
  Upload, 
  Settings, 
  Users, 
  BookOpen, 
  BarChart3,
  Download,
  Share2
} from 'lucide-react'

const quickActions = [
  {
    title: '新建文章',
    description: '创建新的知识库文章',
    icon: Plus,
    href: '/knowledge/create',
    variant: 'default' as const
  },
  {
    title: '上传文件',
    description: '上传文档或媒体文件',
    icon: Upload,
    href: '/files',
    variant: 'outline' as const
  },
  {
    title: '用户管理',
    description: '管理系统用户和权限',
    icon: Users,
    href: '/users',
    variant: 'outline' as const
  },
  {
    title: '数据导出',
    description: '导出系统数据报表',
    icon: Download,
    href: '/analytics',
    variant: 'outline' as const
  },
  {
    title: '系统设置',
    description: '配置系统参数',
    icon: Settings,
    href: '/settings',
    variant: 'outline' as const
  },
  {
    title: '分享设置',
    description: '配置内容分享规则',
    icon: Share2,
    href: '/settings',
    variant: 'outline' as const
  }
]

export function QuickActions() {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <BarChart3 className="h-5 w-5" />
          <span>快速操作</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
          {quickActions.map((action) => (
            <Button
              key={action.title}
              variant={action.variant}
              className="h-auto p-4 flex flex-col items-start space-y-2 text-left"
              asChild
            >
              <Link href={action.href}>
                <action.icon className="h-5 w-5" />
                <div>
                  <div className="font-medium">{action.title}</div>
                  <div className="text-xs text-muted-foreground">
                    {action.description}
                  </div>
                </div>
              </Link>
            </Button>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
